<meta charset="UTF-8">
<title>carousel</title>

<div class="carousel">
	<div>
		<div>
			<a href="topic/?id=283">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150919114717260.jpg">
			</a>
		</div>
		<div>
			<a href="live/?id=3">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150918214948448.png">
			</a>
		</div>
		<div>
			<a href="topic/?id=346">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150910171423733.png">
			</a>
		</div>
		<div>
			<a href="topic/?id=345">
				<img src="http://imgu.3gtv.net:9090/_file/section/20150909172539065.jpg">
			</a>
		</div>
		 
	</div>
</div>

<style>
	.carousel{
		height:250px;
		width:600px;
		overflow:hidden;
		position: relative;
	}
	
	.carousel > div{ /* mover */
		left:0;
		position:absolute;
		white-space: nowrap;
		width : 200%;
	}
	
	.carousel > div > div{
		float: left;
		width : 50%;
	}
	.carousel > div > div img {
		width: 100%;
	}
	
	.hide{
		display:none;
	}
</style>

<script>
Function.prototype.delegate = function () {  
    var self = this, scope = this.scope, args = arguments, aLength = arguments.length, fnToken = 'function';  
  
    return function(){  
        var bLength = arguments.length, Length = (aLength > bLength) ? aLength : bLength;  
  
        // mission one:  
        for (var i = 0; i < Length; i++)  
            if (arguments[i])args[i] = arguments[i]; // 拷贝参数  
  
        args.length = Length; // 在 MS jscript下面，arguments作为数字来使用还是有问题，就是length不能自动更新。修正如左:  
  
        // mission two:  
        for (var i = 0, j = args.length; i < j; i++) {  
            var _arg = args[i];  
            if (_arg && typeof _arg == fnToken && _arg.late == true)  
                args[i] = _arg.apply(scope || this, args);  
        }  
  
        return self.apply(scope || this, args);  
    };  
};  
function Carousel(el) {
	var containerWidth = el.clientWidth, 
		mover = el.querySelector('div'),
		items = mover.children, len = items.length;
	
    var count = 0;
	window.run = function (){
		var move = '-100%';
    	if(++count == len){
			move = '0';
			count = 0;
		}
		
		for(var p = 0; p < len; p++){
	//			debugger;
			if((count -1) == p){ // 当前的
				if (items[p].className.indexOf('hide') != -1) {
					//items[p].className = '';
				}
				//continue;
			}else if((count) == p){// 要显示的
				items[p].className = '';
			}else{	
				items[p].className = 'hide';
			}
		}
		
		mover.style.transition = 'left 200ms linear';
		mover.style.left = move;
		
		setTimeout(function(){
			mover.style.transition = 'initial';
			mover.style.left = '0';
			items[count -1] && (items[count -1].className = 'hide');
		}, 200);
    }
	window.runToF = function (targetIndex){
		var move;
		if(targetIndex > count){
			move = '-100%';
		}else{
			move = '-0%';
		}
	
		var current;
		for(var p = 0; p < len; p++){
			if(p == count){// 当前显示的
				current = items[p];
				current && (current.className = '');
				items[p].className = '';
			}else if(p == targetIndex){// 要显示的
				
				items[p].className = '';
			}else{	
				items[p].className = 'hide';
			}
		}
		
		mover.style.transition = 'left 900ms linear';
		mover.style.left = move;
		
		
		function end(count){
			mover.style.transition = 'initial';
			mover.style.left = '0';
			current && (current.className = 'hide');
		}
		Carousel.onEnd = end;
		//if(targetIndex > count){
		mover.addEventListener("transitionend", function(){
			//Carousel.onEnd();
		});
		
		setTimeout(end.delegate(count), 900);
		count = targetIndex;

    }
	
	var max = 0
	window.runTo = function (targetIndex){
		var move;
		if(targetIndex > count){
			move = '-100%';
			
		}else{
			move =  '0%';
		}
	
		var current;
		for(var p = 0; p < len; p++){
			if(p == count){// 当前显示的
				current = items[p];
				current && (current.className = '');
				items[p].className = '';
			}else if(p == targetIndex){// 要显示的
				
				items[p].className = '';
			}else{	
				items[p].className = 'hide';
			}
		}
		
		mover.style.transition = 'left 900ms linear';
		mover.style.left = move;
		
		count = targetIndex;

    }
    //setInterval(run, 4000);
}

Carousel.onEnd = function(){}
	
new Carousel(document.querySelector('.carousel'));
</script>
